/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="">
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class='head-img' @click='back'>
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<text>{{isAdd?'添加常用信息':'修改信息'}}</text>
		</view>
		<view class="renyuan-area">
			<view class="renyuan-item" >
				<view class="list">
					<view class="item" >
						<view class="item-info">
							<text class="label">姓名</text>
							<input type="text" v-model="name" placeholder="请填写收货人姓名">
						</view>
						<view class="item-info">
							<text class="label">联系方式</text>
							<input type="text" v-model="phone" placeholder="请填写手机号码">
						</view>
						<view class="item-info">
							<text class="label">身份证</text>
							<input type="text" v-model="idNum" placeholder="填写真实身份证号">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view :class="name!=''&&phone!=''&&idNum!=''?'commit':'commit-dis'" @click="commit">确认保存</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				openAdd:false,
				isAdd:true,
				addName:'',
				name:'',
				phone:'',
				idNum:'',
			}
		},
		onLoad(e) {
			if(e.name!=null){
				this.name = e.name
				this.phone = e.phone
				this.idNum = e.idNum
				this.isAdd = false
			}
		},
		methods: {
			getStatusTop(){
				if(this.statusBarHeight < 20+'px'){
					this.statusBarHeight = 20 +'px'
				}
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			commit(){
				if(this.name == ''||this.phone == ''||this.idNum == ''){
					return
				}
				uni.navigateBack({
					delta:1
				})
			}
		},
		created(){
			
		},
		mounted() {
			this.getStatusTop();
		},
		components:{
			uniIcon
		}
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.head{
		width: 750upx;
		/* height: 124upx; */
		position: fixed;
		z-index: 2;
		height: auto;
		background: #FFFFFF;
	}
	.commit{
		width: 690upx;
		height: 88upx;
		border-radius: 20upx;
		background: rgba(84,171,255,1.00);
		text-align: center;
		font-size: 30upx;
		line-height: 88upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 57upx;
		color: #FFFFFF;
	}
	.commit-dis{
		width: 690upx;
		height: 88upx;
		border-radius: 20upx;
		background: rgba(189,223,255,1.00);
		text-align: center;
		font-size: 30upx;
		line-height: 88upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 57upx;
		color: #FFFFFF;
	}
	.head-img{
		width: 79upx;
		height: 80upx;
		/* margin-top: 44upx; */
		float: left;
	}
	.head image{
		width: 36upx;
		margin-left: 29upx;
		margin-top:20upx;
		height: 36upx;
	}
	.head text{
		float: left;
		font-size: 30upx;
		font-weight: bold;
		line-height: 60upx;
		margin-top: 8upx;
	}
	.renyuan-area{
		width: 100%;
		height: auto;
		padding-top: 150upx;
	}
	.renyuan-item{
		width: 100%;
		height: auto;
		margin-top: 32upx;
	}
	.renyuan-label{
		width: 666upx;
		margin-left: 30upx;
		height: 80upx;
		padding-left: 24upx;
		color: rgba(182,182,182,1.00);
		line-height: 80upx;
		font-size: 28upx;
	}
	
	.list{
		width: 666upx;
		margin-left: 30upx;
		padding-left: 24upx;
		font-size: 28upx;
		border-radius: 20upx;
		height: auto;
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.item{
		width: 100%;
		padding-top: 20upx;
		padding-bottom: 20upx;
		height: auto;
		display: table;
		line-height: 100upx;
	}
	.item-info{
		height: 100upx;
		width: 635upx;
		font-size: 28upx;
		border-top: rgba(246,246,246,1.00) solid 2upx ;
	}
	.item-info:first-child{
		border-top: none;
	}
	.item-info image{
		width: 29upx;
		height: 21upx;
		float: left;
		margin-top: 16upx;
		/* margin-left: 24upx; */
	}
	.name{
		width: 150upx;
		font-size: 28upx;
		line-height: 100upx;
		float: left;
	}
	.label{
		width: 150upx;
		height: 100upx;
		line-height: 100upx;
		display: block;
		float: left;
		color: rgba(51,51,51,1.00);
	}
	.item-info input{
		height: 100upx;
		width: 400upx;
		line-height: 100upx;
		border: none;
		font-size: 28upx;
		
	}
	.item-right{
		margin-top: 10upx;
		width: 630upx;
		border-top: rgba(246,246,246,1.00) solid 2upx ;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		
		height: 100upx;
		color: rgba(102,102,102,1.00);
	}
	/* .line{
		background: rgba(246,246,246,1.00);
		width: 630upx;
		height: 1upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 8upx;
	} */
	.bj{
		width: 120upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		float: left;
	}
	.bj text{
		width: 100upx;
	}
	.bj image{
		width: 24upx;
		height: 24upx;
		margin-top: 38upx;
		margin-right: 13upx;
	}
	.delete{
		width: 120upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		float: right;
	}
	.delete image{
		width: 22upx;
		height: 24upx;
		margin-top: 38upx;
		margin-right: 13upx;
	}
	.add-input{
		width: 100%;
		height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.add-input input{
		width: 460upx;
		height: 80upx;
		line-height: 80upx;
		border: none;
		font-size: 28upx;
		color: #000000;
	}
	.add-input image{
		width: 38upx;
		height: 38upx;
		margin-top: 21upx;
	}
	.add-btn{
		width: 116upx;
		height: 58upx;
		border-radius: 20upx;
		background: rgba(84,171,255,1.00);
		color: #FFFFFF;
		font-size: 30upx;
		text-align: center;
		line-height: 58upx;
		margin-right: 20upx;
		margin-top: 11upx;
	}
</style>
